<ion-header>
  <ion-navbar>
    <button ion-button menuToggle >
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>记一笔</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="下拉刷新"
        refreshingSpinner="circles"
        refreshingText="正在刷新...">
      </ion-refresher-content>
    </ion-refresher>
  <div class="showamount">
    <ion-grid>
      <ion-row>
          <p class="show_p">
          本月支出（元）
          </p>
      </ion-row>
      <ion-row>
          <ion-col col-11>
            <p class="amount">￥{{amount | number :'.2-2'}}</p>
          </ion-col>
          <ion-col col-1>
            <ion-icon name="happy" *ngIf="amount<=3500" class="icon_mood"></ion-icon>
            <ion-icon name="sad" *ngIf="amount>3500" class="icon_mood"></ion-icon>
          </ion-col>
      </ion-row>
    <ion-row>
    <p class="deposit">
      本月剩余 <span>{{4000-amount | number:'.2-2'}} <ion-icon style="color:red" *ngIf="amount>3500" name="flash">&nbsp;</ion-icon></span>
    </p>
    </ion-row>
  </ion-grid>
    
  </div>
  <ion-grid>
    <ion-row class="add_row">
      <ion-col col-6 offset-3>
        <button ion-button color="danger" icon-left class="add_btn" (click)="addBill()">
        <ion-icon name="add" ></ion-icon>
          记一笔账
        </button>
      </ion-col>
    </ion-row>
    <ion-row>
      
    </ion-row>

    <ion-row class="list_row">
      <ion-col col-12>
        <ion-list>
          <button ion-item *ngFor="let item of amounts" class="" (click)="amountClick()">
           <ion-avatar item-left>
           <ion-icon name="{{item.icon}}"></ion-icon>
           </ion-avatar>
            <div >
              <p class="item_title">{{item.title}}</p>
              <p class="item_time">&nbsp;</p>
            </div>
            <div class="item_right" item-right>
              <p class="item_amount">{{item.amount | number:'.2-2'}}</p>
              <p class="item_time"></p>
            </div>
          </button>
          
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
  
</ion-content>
